<template>
	<view :style="`padding-bottom: ${TabbarHeight>0?TabbarHeight * 2:20}px;`">
		<view :class="system.isH5?'bg-1':'bg'" :style="'background-image: url(' + WEBCONFIG?.bd + ');'">
			<view class="ml-16 position-absolute bottom-30">
				<view :style="`padding-top:${height }px`" >
					<text class="fw-600 fs-30 text-white">刷题榜单</text>
				</view>
				<view class="mt-8 flex position-relative">
					<text class="text-white mr-4" @click="categoryShow=!categoryShow">{{selectCategory.name}}</text>
					<uv-icon name="arrow-down" color="#fff"></uv-icon>
					<view class="bg-white rounded-12  position-absolute  w-120" style="z-index: 9999;bottom: -280rpx;"
						v-if="categoryShow">
						<view class="p-12 flex flex-x-space-between" v-for="(item,index) in categoryList" :key='index'
							@click="select(item)">
							<text :class="{'text-blue-1':item.type==selectCategory.type}">{{item.name}}</text>
							<uv-icon name='checkbox-mark' color="#3D5CFF" size="18"
								v-if="selectCategory.type==item.type"></uv-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class=" position-relative top--10">
			<uv-tabs :list="tabsList" @change="changeTab" :scrollable="false" line-color="#272727"
				active-style="font-size:17px;color:#272727;" inactiveStyle="color:#ACACAC;"></uv-tabs>
		</view>

		<z-paging ref="paging" @query="getList" use-page-scroll v-model="list" :loading-more-enabled="false">
			<view class="px-24 mt-10">
				<view class="flex flex-column" v-for="(item,index) in list">
					<view class=" flex flex-y-center flex-x-space-between rounded-8 mb-16 pl-13 pr-20 py-16 "
						:class="{first:index==0,second:index==1,third:index==2}">
						<view class="flex flex-y-center">
							<image src="@/static/icon/dy.png" class="w-23 h-26" v-if='index==0'></image>
							<image src="@/static/icon/de.png" class="w-23 h-26" v-if='index==1'></image>
							<image src="@/static/icon/ds.png" class="w-23 h-26" v-if='index==2'></image>
							<text v-if='index>2' class="fs-16 fw-600">{{index + 1}}</text>
							<view class="flex flex-y-center">
								<image :src="item?.user?.avatar" class="w-44 h-44 rounded-circle mx-14"></image>
								<text class="fs-17 fw-500">{{item.user?.nickname}}</text>
							</view>
						</view>
						<text class="fs-17 text-blue-1 fw-600" v-if="selectCategory.type==1">{{item.total}}</text>
						<text class="fs-17 text-blue-1 fw-600" v-if="selectCategory.type==2">{{item.day}}</text>
						<text class="fs-17 text-blue-1 fw-600" v-if="selectCategory.type==3">{{item.total}}</text>
					</view>
					<view class="under-line mb-16" v-if="index>2"></view>
				</view>
			</view>
		</z-paging>

		<view class="position-fixed  px-24 user-r py-8 bg-white left-0 right-0" :style="`bottom:${TabbarHeight}px`"
			:class="{first:userRank==1,second:userRank==2,third:userRank==3}">
			<view class=" flex flex-y-center flex-x-space-between rounded-8  pl-13 pr-20 ">
				<view class="flex flex-y-center">
					<image src="@/static/icon/dy.png" class="w-23 h-26" v-if='userRank==1'></image>
					<image src="@/static/icon/de.png" class="w-23 h-26" v-if='userRank==2'></image>
					<image src="@/static/icon/ds.png" class="w-23 h-26" v-if='userRank==3'></image>
					<text v-if='userRank>3' class="fs-16 fw-600">{{userRank}}</text>
					<image :src="USERINFO?.avatar" class="w-44 h-44 rounded-circle mx-14"></image>
					<text class="fs-17 fw-500">{{USERINFO?.nickname}}</text>
				</view>
				<text class="fs-17 text-blue-1 fw-600">{{number}}</text>
			</view>
		</view>
		<view class="tabbars">
			<y-tabbar ref="tabbars"></y-tabbar>
		</view>
	</view>
</template>

<script setup>
	import system from "@/utils/system";
	import { $http } from '@/utils'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useWebConfigStore, useRefs, useUserStore } from "@/stores/index";
	import { reactive, ref, onMounted } from 'vue'

	// #ifndef H5
	const height = uni.getMenuButtonBoundingClientRect().bottom
	// #endif
	// #ifdef H5
	const height = 15
	// #endif


	const TabbarHeight = ref(0)
	const type = ref(1)
	const categoryList = reactive([
		{ name: '刷题数量', type: 1 },
		{ name: '打卡天数', type: 2 },
		{ name: '积分排名', type: 3 },
	])
	const selectCategory = ref({
		type: 1,
		name: '刷题数量'
	})
	const categoryShow = ref(false)
	const list = ref([])
	const number = ref(0)
	const userRank = ref([])
	const auto = ref(false)
	const paging = ref()
	const tabsList = reactive([
		{ name: '总榜', type: 1 },
		{ name: '月榜', type: 2 },
		{ name: '周榜', type: 3 }
	])
	const { USERINFO } = useRefs(useUserStore());
	const { WEBCONFIG } = useRefs(useWebConfigStore());


	onShow(() => {
		if (paging.value) {
			paging.value.reload()
		}
	})
	onMounted(() => {
		// #ifndef H5
		if (WEBCONFIG.value.custom_tabbar == 1) {
			TabbarHeight.value = 50 + uni.getSystemInfoSync().safeAreaInsets.bottom
		}
		// #endif
		// #ifdef H5
		TabbarHeight.value = 50 + uni.getSystemInfoSync().safeAreaInsets.bottom
		// #endif

	})

	const getList = (page, limit) => {
		$http.get('Ranking/getList', { type: type.value, category: selectCategory.value.type }).then(res => {
			paging.value.complete(res.data.list)
			userRank.value = res.data.userRank
			number.value = res.data.number
		})
	}
	const changeTab = (e) => {
		type.value = e.type
		paging.value.reload()
	}
	const select = (e) => {
		selectCategory.value = e
		categoryShow.value = false
		paging.value.reload()
	}
</script>

<style>
	.bg {
		height: 374rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
	}

	.bg-1 {
		height: 230rpx;
		background-size: cover;
		overflow: hidden;
		background-position: bottom center;
		background-repeat: no-repeat;
		background-size: 100% 190%;
		position: relative;
	}

	.first {
		background: linear-gradient(to left, #fff, #FFF5E5);
	}

	.second {
		background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #EFF6FF 100%);
	}

	.third {
		background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #FFF2EA 100%);
	}



	.under-line {
		height: 1rpx;
		background-color: #F1F1F1;
	}

	.user-r {
		box-shadow: 0px -4px 5px 0px rgba(227, 233, 240, 0.4);
	}
</style>